<script setup>
import {onMounted, ref, watch, computed} from "vue";
import { ElMessage, ElCard } from 'element-plus';
import playersData from '../players.json';
// 使用已有的头像作为默认头像
import defaultAvatar from '../../../public/static/mr.webp';
import { Close, Refresh, Timer, Delete, ArrowDown, ArrowUp, Trophy, Plus } from '@element-plus/icons-vue'  // 只保留 Close 和 Refresh 图标

// 保留原有的默认玩家数据
const defaultPlayers = [
  {
    name: "dr",
    position: "LTQ大魔王#89104",
    description: "伟大无需多言",
    image: "../../../public/static/dr.jpg",
    social: [
      { icon: "fa-brands fa-weixin fa-xl", link: "#" }
    ],
    disabled: false
  },
  // ... 其他原有玩家数据 ...
];

const players = ref(defaultPlayers);

// 加载玩家数据的函数
const loadPlayers = () => {
  try {
    // 先从 localStorage 获取数据，如果没有则使用 json 文件的数据
    const storedPlayers = localStorage.getItem('players');
    const jsonPlayers = storedPlayers ? JSON.parse(storedPlayers) : playersData.players;

    // 转换数据格式
    const formattedPlayers = jsonPlayers.map(player => ({
      ...player,
      image: player.image || defaultAvatar,
      disabled: false,
      social: player.social || [{ icon: "fa-brands fa-weixin fa-xl", link: "#" }]
    }));

    players.value = formattedPlayers;
  } catch (error) {
    console.error('加载玩家数据失败:', error);
    ElMessage.error('加载玩家数据失败');
    players.value = defaultPlayers;
  }
};

// 在组件挂载时加载玩家数据
onMounted(() => {
  loadPlayers();
});

const selectedPlayers = ref([]);
const selectPlayerToday = (player) => {
  if (selectedPlayers.value.length < 10 && !selectedPlayers.value.some(p => p.name === player.name)) {
    selectedPlayers.value.push(player);
    // ElMessage.success(`${player.name} 已加入今天参赛队列`);
  } else if (selectedPlayers.value.some(p => p.name === player.name)) {
    ElMessage.warning(`${player.name} 已经加入今天参赛队列`);
  } else {
    ElMessage.error('最多只能选择10名选手');
  }
};
const availablePlayers = ref([]);

watch(selectedPlayers, (newSelectedPlayers, oldSelectedPlayers) => {
  availablePlayers.value = selectedPlayers.value
}, { deep: true });


const team1 = ref([]);
const team2 = ref([]);
const currentTeam = ref(1);
const selectionStep = ref(1); // 1: 选择队长, 2: 选择队员

const startSelection = () => {
  players.value.forEach(player => {
    player.disabled = false;
    player.positionAssigned = '';
    player.championAssigned = '';
  });
  if (selectionStep.value === 1) {
    if (team1.value.length === 0 || team2.value.length === 0) {
      ElMessage.warning('请先选择两个队长');
      return;
    }
    selectionStep.value = 2;
  }
};

const sjSelection = () => {
  players.value.forEach(player => {
    player.disabled = false;
    player.positionAssigned = ''; // 重置已分配的位置
    player.championAssigned = ''; // 重置已分配的英雄
  });
  // 重置队伍和选手状态
  team1.value = [];
  team2.value = [];
  players.value.forEach(player => {
    player.disabled = false;
  });

  // 随机选择10名选手
  const shuffledPlayers = availablePlayers.value.sort(() => 0.5 - Math.random());
  const selectedPlayers = shuffledPlayers.slice(0, 10);

  // 将选中的选手分配到两个队伍
  team1.value = selectedPlayers.slice(0, 5);
  team2.value = selectedPlayers.slice(5, 10);

  // 设置选人结束
  selectionStep.value = 3;

  // 禁用已选选手
  selectedPlayers.forEach(player => {
    player.disabled = true;
  });

};

const sjSelectionPosition = () => {
  players.value.forEach(player => {
    player.disabled = false;
    player.positionAssigned = ''; // 重置已分配的位置
    player.championAssigned = ''; // 重置已分配的英雄
  });
  // 重置队伍和选手状态
  team1.value = [];
  team2.value = [];
  players.value.forEach(player => {
    player.disabled = false;
    player.positionAssigned = ''; // 重置已分配的位置
  });

  // 随机选择10名选手
  const shuffledPlayers = availablePlayers.value.sort(() => 0.5 - Math.random());
  const selectedPlayers = shuffledPlayers.slice(0, 10);

  // 随机分配位置
  const positions = ['上单', '打野', '中单', '射手', '辅助'];
  const assignPositions = (team) => {
    const shuffledPositions = positions.sort(() => 0.5 - Math.random());
    team.forEach((player, index) => {
      player.positionAssigned = shuffledPositions[index];
    });
  };

  // 将选中的选手分配到两个队伍并分配位置
  team1.value = selectedPlayers.slice(0, 5);
  team2.value = selectedPlayers.slice(5, 10);

  assignPositions(team1.value);
  assignPositions(team2.value);

  // 设置选人结束
  selectionStep.value = 3;

  // 禁用已选选手
  selectedPlayers.forEach(player => {
    player.disabled = true;
  });
};


const selectFromSelectedPlayers = (player) => {
  if (player.disabled) {
    ElMessage.warning(`${player.name} 已经被选中`);
    return;
  }

  if (selectionStep.value === 1) {
    if (team1.value.length === 0) {
      team1.value.push(player);
      player.isCaptain = true;
      player.disabled = true;
      ElMessage.success(`${player.name} 已被选为队伍1队长`);
    } else if (team2.value.length === 0) {
      team2.value.push(player);
      player.isCaptain = true;
      player.disabled = true;
      ElMessage.success(`${player.name} 已被选为队伍2队长`);
      startSelection(); // 自动进入下一步
    }
  } else if (selectionStep.value === 2) {
    if (currentTeam.value === 1) {
      if (team1.value.length >= 5) {
        ElMessage.warning('队伍1已满');
        return;
      }
      team1.value.push(player);
      ElMessage.success(`${player.name} 已加入队伍1`);
    } else {
      if (team2.value.length >= 5) {
        ElMessage.warning('队伍2已满');
        return;
      }
      team2.value.push(player);
      ElMessage.success(`${player.name} 已加入队伍2`);
    }
    player.disabled = true;
    
    // 检查是否所有选手都已选择
    if (team1.value.length === 5 && team2.value.length === 5) {
      endSelection();
    } else {
      switchTeam();
    }
  }
};
const switchTeam = () => {
  currentTeam.value = currentTeam.value === 1 ? 2 : 1;
};

const endSelection = () => {
  // alert('选人结束！')
  selectionStep.value = 3;
};

const cxxr = () => {
  players.value.forEach(player => {
    player.disabled = false;
    player.positionAssigned = ''; // 重置已分配的位置
    player.championAssigned = ''; // 重置已分配的英雄
  });
  // 清空team1和team2
  team1.value = [];
  team2.value = [];
  // 重置selectedPlayers
  selectionStep.value = 1;
  selectedPlayers.value.forEach(player => {
    player.disabled = false;
  });
  // selectedPlayers.value = [];
  // 重置currentTeam和selectionStep
  currentTeam.value = 1;
}

const cxxzcsry = () => {
  players.value.forEach(player => {
    player.disabled = false;
    player.positionAssigned = ''; // 重置已分配的位置
    player.championAssigned = ''; // 重置已分配的英雄
  });
  // 清空team1和team2
  team1.value = [];
  team2.value = [];
  // 重置selectedPlayers
  selectionStep.value = 1;
  selectedPlayers.value.forEach(player => {
    player.disabled = false;
  });
  selectedPlayers.value = [];
  // 重置currentTeam和selectionStep
  currentTeam.value = 1;
}

const champions = [
  "时间刺客", "星界游神", "河流之王", "永猎双子", "海兽祭司", "戏命师", "铸星龙王", "岩雀", "暴怒骑士", "翠神", "青钢影", "幻翎", "逆羽", "影流之镰", "山隐之焰", "暮光星灵", "虚空之女", "血港鬼影", "万花通灵", "解脱者", "魔法猫咪", "元素女皇", "涤魂圣枪", "残月之肃", "腕豪", "含羞蓓蕾", "沙漠玫瑰", "封魔剑魂", "星籁歌姬", "镕铁少女", "破败之王", "灵罗娃娃", "影哨", "愁云使者", "祖安花火", "炼金男爵", "虚空女皇", "不羁之悦", "狂厄蔷薇", "纳祖芒荣耀", "明烛", "百裂冥犬", "异画师", "炽炎雏龙", "双界灵兔", "铁血狼母", "虚空遁地兽", "复仇之矛", "沙漠皇帝", "迷失之牙", "弗雷尔卓德之心", "虚空之眼", "疾风剑豪", "圣枪游侠", "暗裔剑魔", "冰霜女巫", "生化魔人", "德玛西亚之翼", "魂锁典狱长", "皮城执法官", "唤潮鲛姬", "影流之主", "蜘蛛女皇", "虚空掠夺者", "暗黑元首", "傲之追猎者", "皎月女神", "荆棘之兴", "未来守护者", "荣耀行刑官", "诺克萨斯之手", "惩戒之箭", "战争之影", "仙灵女巫", "无双剑姬", "深海泰坦", "爆破鬼才", "北地之怒", "奥术先驱", "九尾妖狐", "不灭狂雷", "潮汐海灵", "龙血武姬", "法外狂徒", "远古巫灵", "放逐之刃", "刀锋之影", "上古领主", "齐天大圣", "曙光女神", "牧魂人", "发条魔灵", "暗夜猎手", "机械公敌", "复仇焰魂", "盲僧", "永恒梦魇", "德玛西亚皇子", "扭曲树精", "天启者", "荒漠屠夫", "皮城女警", "魔蛇之拥", "巨魔之王", "刀锋舞者", "诡术妖姬", "光辉女郎", "诺克萨斯统领", "琴瑟仙女", "赏金猎人", "无畏战车", "正义巨像", "猩红收割者", "德邦总管", "深渊巨口", "狂战士", "虚空先知", "离群之刺", "德玛西亚之力", "狂暴之心", "铁铠冥魂", "不屈之枪", "圣锤之毅", "狂野女猎手", "兽灵行者", "大发明家", "恶魔小丑", "沙漠死神", "英勇投弹手", "不祥之刃", "蒸汽机器人", "祖安狂人", "风暴之怒", "熔岩巨兽", "海洋之灾", "瓦洛兰之盾", "虚空行者", "邪恶小法师", "冰晶凤凰", "披甲龙龟", "殇之木乃伊", "虚空恐惧", "死亡颂唱者", "痛苦之拥", "蛮族之王", "瘟疫之源", "炼金术士", "时光守护者", "牛头酋长", "黑暗之女", "寒冰射手", "远古恐惧", "武器大师", "正义天使", "无极剑圣", "堕落天使", "雪原双子", "符文法师", "亡灵战神", "战争女神", "众星之子", "迅捷斥候", "麦林炮手", "卡牌大师", "祖安怒兽"
];

const sjSelectionWithChampions = () => {
  // 重置队伍和选手状态
  team1.value = [];
  team2.value = [];
  players.value.forEach(player => {
    player.disabled = false;
    player.positionAssigned = ''; // 重置已分配的位置
    player.championAssigned = ''; // 重置已分配的英雄
  });

  // 随机选择10名选手
  const shuffledPlayers = availablePlayers.value.sort(() => 0.5 - Math.random());
  const selectedPlayers = shuffledPlayers.slice(0, 10);

  // 随机分配位置
  const positions = ['上单', '打野', '中单', '射手', '辅助'];
  const assignPositions = (team) => {
    const shuffledPositions = positions.sort(() => 0.5 - Math.random());
    team.forEach((player, index) => {
      player.positionAssigned = shuffledPositions[index];
    });
  };

  // 随机分配英雄
  const assignChampions = (team) => {
    const shuffledChampions = champions.sort(() => 0.5 - Math.random());
    team.forEach((player, index) => {
      player.championAssigned = shuffledChampions[index];
    });
  };

  // 将选中的选手分配到两个队伍并分配位置和英雄
  team1.value = selectedPlayers.slice(0, 5);
  team2.value = selectedPlayers.slice(5, 10);

  assignPositions(team1.value);
  assignPositions(team2.value);

  assignChampions(team1.value);
  assignChampions(team2.value);

  // 设置选人结束
  selectionStep.value = 3;

  // 禁用已选选手
  selectedPlayers.forEach(player => {
    player.disabled = true;
  });
};

const sjSelectionWithChampionsNoPo = () => {
  // 重置队伍和选手状态
  team1.value = [];
  team2.value = [];
  players.value.forEach(player => {
    player.disabled = false;
    player.positionAssigned = ''; // 重置已分配的位置
    player.championAssigned = ''; // 重置已分配的英雄
  });

  // 随机选择10名选手
  const shuffledPlayers = availablePlayers.value.sort(() => 0.5 - Math.random());
  const selectedPlayers = shuffledPlayers.slice(0, 10);

  // // 随机分配位置
  // const positions = ['上单', '打野', '中单', '射手', '辅助'];
  // const assignPositions = (team) => {
  //   const shuffledPositions = positions.sort(() => 0.5 - Math.random());
  //   team.forEach((player, index) => {
  //     player.positionAssigned = shuffledPositions[index];
  //   });
  // };

  // 随机分配英雄
  const assignChampions = (team) => {
    const shuffledChampions = champions.sort(() => 0.5 - Math.random());
    team.forEach((player, index) => {
      player.championAssigned = shuffledChampions[index];
    });
  };

  // 将选中的选手分配到两个队伍并分配位置和英雄
  team1.value = selectedPlayers.slice(0, 5);
  team2.value = selectedPlayers.slice(5, 10);

  // assignPositions(team1.value);
  // assignPositions(team2.value);

  assignChampions(team1.value);
  assignChampions(team2.value);

  // 设置选人结束
  selectionStep.value = 3;

  // 禁用已选选手
  selectedPlayers.forEach(player => {
    player.disabled = true;
  });
};

// 添加卡片点击处理函数
const handleCardToggle = (event) => {
  const card = event.currentTarget.parentElement.parentElement;
  const isVisible = card.dataset.visible;

  if (isVisible === "false") {
    card.setAttribute("data-visible", true);
  } else {
    card.setAttribute("data-visible", false);
  }
};

// 修改删除玩家的方法
const removePlayer = (player, type) => {
  if (type === 'selected') {
    // 从今日参赛选手中删除
    const index = selectedPlayers.value.findIndex(p => p.name === player.name);
    if (index !== -1) {
      selectedPlayers.value.splice(index, 1);
      ElMessage.success(`已将 ${player.name} 从参赛队列中移除`);
    }
  } else if (type === 'pool') {
    // 从选手池中删除
    try {
      // 从 localStorage 获取数据
      const storedPlayers = localStorage.getItem('players');
      let currentPlayers = storedPlayers ? JSON.parse(storedPlayers) : playersData.players;
      
      // 过滤掉要删除的选手
      currentPlayers = currentPlayers.filter(p => p.name !== player.name);
      
      // 保存回 localStorage
      localStorage.setItem('players', JSON.stringify(currentPlayers));
      
      // 重新加载选手数据
      loadPlayers();
      
      ElMessage.success(`已将 ${player.name} 从选手池中删除`);
    } catch (error) {
      console.error('删除选手失败:', error);
      ElMessage.error('删除选手失败');
    }
  }
};

// 新增选手相关的数据
const dialogVisible = ref(false);
const newPlayer = ref({
  name: '',
  position: '',
  description: '',
  image: '../../../public/static/mr.webp',  // 默认头像
  social: [{ icon: "fa-brands fa-weixin fa-xl", link: "#" }]
});

// 新增选手的方法
const addPlayer = () => {
  if (!newPlayer.value.name) {
    ElMessage.warning('请输入选手名称');
    return;
  }

  try {
    // 获取现有数据
    const storedPlayers = localStorage.getItem('players');
    const currentPlayers = storedPlayers ? JSON.parse(storedPlayers) : playersData.players;

    // 添加新选手
    currentPlayers.push({
      name: newPlayer.value.name,
      position: newPlayer.value.position || 'xxxx',
      description: newPlayer.value.description || '实力不祥',
      image: '../../../public/static/mr.webp',
      social: [{ icon: "fa-brands fa-weixin fa-xl", link: "#" }]
    });

    // 保存到 localStorage
    localStorage.setItem('players', JSON.stringify(currentPlayers));

    // 重新加载选手数据
    loadPlayers();
    
    // 关闭对话框并清空表单
    dialogVisible.value = false;
    newPlayer.value = {
      name: '',
      position: '',
      description: '',
      image: '../../../public/static/mr.webp',
      social: [{ icon: "fa-brands fa-weixin fa-xl", link: "#" }]
    };

    ElMessage.success('添加选手成功');
  } catch (error) {
    console.error('添加选手失败:', error);
    ElMessage.error('添加选手失败');
  }
};

// 修改重置数据的方法
const resetLocalData = () => {
  try {
    // 清除 localStorage 中的数据
    localStorage.removeItem('players');
    
    // 直接使用 json 文件中的数据
    const jsonPlayers = playersData.players;
    
    // 转换数据格式
    const formattedPlayers = jsonPlayers.map(player => ({
      ...player,
      image: player.image || defaultAvatar,
      disabled: false,
      social: player.social || [{ icon: "fa-brands fa-weixin fa-xl", link: "#" }]
    }));
    
    // 更新 players 数据
    players.value = formattedPlayers;
    
    // 将初始数据保存到 localStorage
    localStorage.setItem('players', JSON.stringify(jsonPlayers));
    
    // 重置选中的选手和队伍状态
    selectedPlayers.value = [];
    team1.value = [];
    team2.value = [];
    selectionStep.value = 1;
    currentTeam.value = 1;
    
    // 重置所有选手的状态
    players.value.forEach(player => {
      player.disabled = false;
      player.positionAssigned = '';
      player.championAssigned = '';
    });
    
    ElMessage.success('数据已重置为初始状态');
  } catch (error) {
    console.error('重置数据失败:', error);
    ElMessage.error('重置数据失败');
  }
};

// 修改分数相关的状态和方法
const team1Score = ref(0);
const team2Score = ref(0);
const team1Status = computed(() => {
  if (team1Score.value > team2Score.value) return 'win';
  if (team1Score.value < team2Score.value) return 'lose';
  return 'draw';
});
const team2Status = computed(() => {
  if (team2Score.value > team1Score.value) return 'win';
  if (team2Score.value < team1Score.value) return 'lose';
  return 'draw';
});

// 修改分数更新方法
const updateScore = (team, value) => {
  if (team === 1) {
    team1Score.value = Math.max(0, value);
  } else {
    team2Score.value = Math.max(0, value);
  }
};

// 添加历史记录相关的状态和方法
const matchHistory = ref([]);

const saveMatchResult = () => {
  const matchResult = {
    date: new Date().toLocaleString(),
    team1: {
      players: team1.value,
      score: team1Score.value
    },
    team2: {
      players: team2.value,
      score: team2Score.value
    }
  };
  matchHistory.value.push(matchResult);
  localStorage.setItem('matchHistory', JSON.stringify(matchHistory.value));
  
  // 只重置比分
  team1Score.value = 0;
  team2Score.value = 0;
  
  ElMessage.success('比赛结果已保存');
};

// 在组件挂载时加载历史记录
onMounted(() => {
  const savedHistory = localStorage.getItem('matchHistory');
  if (savedHistory) {
    matchHistory.value = JSON.parse(savedHistory);
  }
});

// 为每个玩家添加位置偏好
const updatePlayerPreference = (player, position) => {
  player.preferredPosition = position;
  // 保存到localStorage
  const storedPlayers = JSON.parse(localStorage.getItem('players'));
  const updatedPlayers = storedPlayers.map(p => {
    if (p.name === player.name) {
      return { ...p, preferredPosition: position };
    }
    return p;
  });
  localStorage.setItem('players', JSON.stringify(updatedPlayers));
};

const quickReset = () => {
  // 保持当前参赛选手，只重置分组
  team1.value = [];
  team2.value = [];
  team1Score.value = 0;
  team2Score.value = 0;
  selectionStep.value = 1;
  currentTeam.value = 1;
  selectedPlayers.value.forEach(player => {
    player.disabled = false;
    player.isCaptain = false;
    player.positionAssigned = '';
    player.championAssigned = '';
  });
};

// 添加删除历史记录的方法
const deleteMatchHistory = (index) => {
  matchHistory.value.splice(index, 1);
  localStorage.setItem('matchHistory', JSON.stringify(matchHistory.value));
  ElMessage.success('已删除该比赛记录');
};

// 添加分页和排序相关的状态
const currentPage = ref(1);
const pageSize = ref(5);
const sortOrder = ref('desc'); // 'desc' 为降序，'asc' 为升序

// 计算排序后的历史记录
const sortedHistory = computed(() => {
  return [...matchHistory.value].sort((a, b) => {
    const timeA = new Date(a.date).getTime();
    const timeB = new Date(b.date).getTime();
    return sortOrder.value === 'desc' ? timeB - timeA : timeA - timeB;
  });
});

// 计算分页后的历史记录
const paginatedHistory = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return sortedHistory.value.slice(start, end);
});

// 切换排序方法
const toggleSort = () => {
  sortOrder.value = sortOrder.value === 'desc' ? 'asc' : 'desc';
};

</script>


<template>
  <section>
    <div class="container flow-content">
      <div class="header-actions">
        <h2 class="section-title">选手池</h2>
        <el-button class="custom-btn warning" @click="resetLocalData">
          <el-icon><Refresh /></el-icon>
          重置数据
        </el-button>
      </div>
      <!-- 添加新增选手按钮 -->
      <div class="add-player-btn">
        <el-button class="custom-btn primary" @click="dialogVisible = true">
          <el-icon><Plus /></el-icon>
          新增选手
        </el-button>
      </div>

      <ul role="list" class="grid">
        <li v-for="player in players" :key="player.name">
          <article class="card" :data-visible="false" :class="{ 'disabled': player.disabled }">
            <!-- 添加删除按钮 -->
            <div class="delete-icon" @click.stop="removePlayer(player, 'pool')">
              <el-icon class="close-icon"><Close /></el-icon>
            </div>
            
            <div class="card__front flow-content" @click="selectPlayerToday(player)">
              <img class="card__img mx-auto" :src="player.image" :alt="player.name" />
              <div class="flow-content" data-spacing="sm">
                <p class="card__name">{{ player.name }}</p>
                <p class="card__position">{{ player.position }}</p>
              </div>
            </div>
            <div class="card__back flow-content">
              <p class="card__name">{{ player.name }}</p>
              <q>{{ player.description }}</q>
              <ul role="list" class="card__social flex-group">
                <li v-for="social in player.social" :key="social.icon">
                  <a :href="social.link">
                    <i :class="social.icon"></i>
                  </a>
                </li>
              </ul>
            </div>
            <footer class="card__footer">
              <button class="card__toggle" @click="handleCardToggle">
                <i class="fa-solid fa-plus card__toggle-icon"></i>
              </button>
            </footer>
          </article>
        </li>
      </ul>

      <h2 class="section-title" style="margin-top: 2rem;">今日参赛选手</h2>
      <div v-if="selectedPlayers.length > 0" class="today-players">
        <div class="players-grid">
          <el-card class="player-card" v-for="player in selectedPlayers" :key="player.name">
            <div class="player-wrapper">
              <div class="delete-btn" @click="removePlayer(player, 'selected')">
                <el-icon><Close /></el-icon>
              </div>
              <div class="player-content" @click="selectFromSelectedPlayers(player)">
                <img :src="player.image" :alt="player.name">
                <p class="player-name">{{ player.name }}</p>
              </div>
            </div>
          </el-card>
        </div>
      </div>
      <div v-else class="empty-players">
        <h3>今日还没有选手</h3>
      </div>


      <h2 class="section-title">开始5v5选人</h2>
      <div class="lottery-container">
        <h3 class="lottery-title">英雄联盟十人分组</h3>
        <div class="teams-container">
          <div class="team-section team-blue" :class="team1Status">
            <div class="team-header">
              <h3 class="team-title">蓝队</h3>
              <div class="score-display">
                <div class="score-status">{{ team1Status === 'win' ? '胜' : team1Status === 'lose' ? '负' : '平' }}</div>
                <div class="score-controls">
                  <el-button 
                    circle 
                    class="control-btn minus-btn" 
                    size="small" 
                    @click="updateScore(1, team1Score - 1)"
                  >-</el-button>
                  <div class="score-input">
                    <el-input-number 
                      v-model="team1Score" 
                      :min="0" 
                      :max="999"
                      size="small"
                      controls-position="right"
                      @change="value => updateScore(1, value)"
                    />
                  </div>
                  <el-button 
                    circle 
                    class="control-btn plus-btn" 
                    size="small" 
                    @click="updateScore(1, team1Score + 1)"
                  >+</el-button>
                </div>
              </div>
            </div>
            <div class="team-players">
              <el-card class="team-player-card" v-for="player in team1" :key="player.name">
                <template #header>
                  <div class="card-header">
                    <span>{{ player.name }} {{ player.isCaptain ? '(队长)' : '' }}</span>
                  </div>
                </template>
                <div class="player-info">
                  <img :src="player.image" :alt="player.name">
                  <div class="player-details">
                    <p v-if="player.positionAssigned" class="position">{{ player.positionAssigned }}</p>
                    <p v-if="player.championAssigned" class="champion">{{ player.championAssigned }}</p>
                  </div>
                </div>
              </el-card>
            </div>
          </div>
          
          <div class="vs-divider">
            <div class="vs-line"></div>
            <div class="vs-text">VS</div>
            <div class="vs-line"></div>
          </div>
          
          <div class="team-section team-red" :class="team2Status">
            <div class="team-header">
              <h3 class="team-title">红队</h3>
              <div class="score-display">
                <div class="score-status">{{ team2Status === 'win' ? '胜' : team2Status === 'lose' ? '负' : '平' }}</div>
                <div class="score-controls">
                  <el-button 
                    circle 
                    class="control-btn minus-btn" 
                    size="small" 
                    @click="updateScore(2, team2Score - 1)"
                  >-</el-button>
                  <div class="score-input">
                    <el-input-number 
                      v-model="team2Score" 
                      :min="0" 
                      :max="999"
                      size="small"
                      controls-position="right"
                      @change="value => updateScore(2, value)"
                    />
                  </div>
                  <el-button 
                    circle 
                    class="control-btn plus-btn" 
                    size="small" 
                    @click="updateScore(2, team2Score + 1)"
                  >+</el-button>
                </div>
              </div>
            </div>
            <div class="team-players">
              <el-card class="team-player-card" v-for="player in team2" :key="player.name">
                <template #header>
                  <div class="card-header">
                    <span>{{ player.name }} {{ player.isCaptain ? '(队长)' : '' }}</span>
                  </div>
                </template>
                <div class="player-info">
                  <img :src="player.image" :alt="player.name">
                  <div class="player-details">
                    <p v-if="player.positionAssigned" class="position">{{ player.positionAssigned }}</p>
                    <p v-if="player.championAssigned" class="champion">{{ player.championAssigned }}</p>
                  </div>
                </div>
              </el-card>
            </div>
          </div>
        </div>
        <div class="selection-step">
          <h3 v-if="selectionStep!==3">{{ selectionStep === 1 ? '请选择两个队长' : `队伍 ${currentTeam} 请选择队员` }}</h3>
          <h3 v-if="selectionStep===3">选人结束</h3>
          <div style="display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-evenly;">
            <button class="start-selection-button" v-if="selectionStep===3" @click="cxxr">重新分组</button>
            <button class="start-selection-button" v-if="selectionStep===3" @click="cxxzcsry">重新选择参赛人员</button>
            <button class="start-selection-button" @click="startSelection" v-if="selectionStep === 1">开始选人直接选(不用点击)</button>
            <button class="start-selection-button" @click="sjSelection">随机5v5</button>
            <button class="start-selection-button" @click="sjSelectionPosition">随机5v5+随机位置</button>
            <button class="start-selection-button" @click="sjSelectionWithChampions">随机5v5+随机英雄+随机位置</button>
            <button class="start-selection-button" @click="sjSelectionWithChampionsNoPo">随机5v5+随机英雄(大乱斗)</button>
          </div>
        </div>
      </div>

      <!-- 修改比赛控制按钮 -->
      <div class="match-controls" v-if="selectionStep === 3">
        <el-button 
          class="custom-btn primary save-match-btn"
          @click="saveMatchResult" 
          :disabled="!team1.length || !team2.length"
        >
          <el-icon><Trophy /></el-icon>
          保存比赛结果
        </el-button>
      </div>

      <!-- 修改历史记录面板 -->
      <el-collapse v-if="matchHistory.length" class="history-collapse">
        <el-collapse-item>
          <template #title>
            <div class="history-title">
              <el-icon><Timer /></el-icon>
              历史对战记录
              <span class="match-count">(共 {{ matchHistory.length }} 场)</span>
              <el-button 
                type="text" 
                @click.stop="toggleSort"
                class="sort-btn"
              >
                {{ sortOrder === 'desc' ? '最新在前' : '最早在前' }}
                <el-icon>
                  <ArrowDown v-if="sortOrder === 'desc'" />
                  <ArrowUp v-if="sortOrder === 'asc'" />
                </el-icon>
              </el-button>
            </div>
          </template>
          
          <div class="history-panel">
            <div v-for="(match, index) in paginatedHistory" :key="index" class="history-item">
              <div class="history-header">
                <span class="match-date">{{ match.date }}</span>
                <el-button 
                  class="custom-btn danger" 
                  size="small" 
                  circle
                  @click.stop="deleteMatchHistory(index)"
                >
                  <el-icon><Delete /></el-icon>
                </el-button>
              </div>
              
              <div class="match-content">
                <!-- 蓝队 -->
                <div class="team-side blue-team" :class="{ 'winner': match.team1.score > match.team2.score }">
                  <div class="team-score">{{ match.team1.score }}</div>
                  <div class="team-players-list">
                    <div v-for="player in match.team1.players" :key="player.name" class="player-item">
                      <img :src="player.image" :alt="player.name">
                      <span class="player-name">{{ player.name }}</span>
                      <span v-if="player.positionAssigned" class="player-position">{{ player.positionAssigned }}</span>
                      <span v-if="player.championAssigned" class="player-champion">{{ player.championAssigned }}</span>
                    </div>
                  </div>
                </div>
                
                <!-- VS -->
                <div class="vs-indicator">
                  <span>VS</span>
                </div>
                
                <!-- 红队 -->
                <div class="team-side red-team" :class="{ 'winner': match.team2.score > match.team1.score }">
                  <div class="team-score">{{ match.team2.score }}</div>
                  <div class="team-players-list">
                    <div v-for="player in match.team2.players" :key="player.name" class="player-item">
                      <img :src="player.image" :alt="player.name">
                      <span class="player-name">{{ player.name }}</span>
                      <span v-if="player.positionAssigned" class="player-position">{{ player.positionAssigned }}</span>
                      <span v-if="player.championAssigned" class="player-champion">{{ player.championAssigned }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 添加分页器 -->
            <div class="pagination-wrapper">
              <el-pagination
                v-model:current-page="currentPage"
                v-model:page-size="pageSize"
                :page-sizes="[5, 10, 20]"
                :total="matchHistory.length"
                layout="total, sizes, prev, pager, next"
                @size-change="currentPage = 1"
                background
              />
            </div>
          </div>
        </el-collapse-item>
      </el-collapse>

      <!-- 新增选手对话框 -->
      <el-dialog
        v-model="dialogVisible"
        title="新增选手"
        width="30%"
        :close-on-click-modal="false"
      >
        <el-form :model="newPlayer" label-width="80px">
          <el-form-item label="名称" required>
            <el-input v-model="newPlayer.name" placeholder="请输入选手名称"/>
          </el-form-item>
          <el-form-item label="位置">
            <el-input v-model="newPlayer.position" placeholder="请输入位置信息"/>
          </el-form-item>
          <el-form-item label="简介">
            <el-input
              v-model="newPlayer.description"
              type="textarea"
              placeholder="请输入选手简介"
            />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="addPlayer">确定</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </section>
</template>

<style lang="scss" scoped>

.start-selection-button {
  display: inline-block;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #0d1a2d;
  border: none;
  border-radius: 5px;
  box-shadow: 0 2px #080d1a;
  transition: 0.3s;
  margin-top: 10px;
}

.start-selection-button:hover {
  background-color: #14213a;
}

.start-selection-button:active {
  background-color: #080d1a;
  box-shadow: 0 1px #080d1a;
  transform: translateY(1px);
}
.container {
  width: 100%;
  margin-inline: auto;
  padding: 1rem;
  box-sizing: border-box;
}

.grid, .players{
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  overflow: hidden;
}

.today-players {
  padding: 20px;
  background: #f5f7fa;
  border-radius: 8px;
  margin: 20px 0;
}

.players-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 20px;  // 电脑端的间距
  justify-items: center;
}

.player-card {
  width: 100px;
  height: 120px;
  
  :deep(.el-card__body) {
    padding: 15px 0 !important;  // 只保留上下内边距，左右设为0
  }
  
  .player-wrapper {
    position: relative;
    height: 100%;
    
    &:hover {
      .delete-btn {
        opacity: 1;
      }
    }
  }
  
  .delete-btn {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 20px;
    height: 20px;
    background-color: #f56c6c;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: all 0.2s ease;
    z-index: 2;
    
    &:hover {
      transform: scale(1.1);
      background-color: #e64242;
    }
    
    .el-icon {
      font-size: 12px;
      color: white;
    }
  }
  
  .player-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    
    img {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      object-fit: cover;
    }
    
    .player-name {
      font-size: 14px;
      margin: 0;
      text-align: center;
      color: #303133;
      font-weight: 500;
    }
  }
}

.empty-players {
  text-align: center;
  padding: 20px;
  color: #909399;
}

.section-title {
  font-size: 1.25rem;
  text-align: center;
  font-weight: bold;
  color: var(--text-primary);
  margin-bottom: 0.5em;
}

.flex-group {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.flow-content {
  display: grid;
  align-content: start;
  gap: 0.5rem;
}

[data-spacing="sm"] {
  gap: 0.25rem;
}

.mx-auto {
  width: fit-content;
  margin-inline: auto;
}

/* starts here */
.card, .el-card {
  width: 100%;
  margin-inline: auto;
  background-color: var(--bg-secondary);
  text-align: center;
  border-radius: 0.5rem;
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 0.5rem;
  padding: 0.5rem;
  box-sizing: border-box;
}

.card__name, .el-card p {
  font-weight: 700;
  color: var(--text-primary);
  font-size: 0.875rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card__position {
  font-style: italic;
  font-size: 0.75rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card__img, .el-card img {
  width: 3rem;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid var(--text-secondary);
}

.card__front {
  transition:
      opacity 250ms ease,
      transform 450ms ease;
}

.card[data-visible="false"] .card__front {
  opacity: 1;
  transform: translateY(0);
}

.card__footer {
  background-color: var(--bg-primary);
  height: 1.5rem;
  position: relative;
  z-index: 5;
}

.card__back {
  position: absolute;
  padding: 0.5rem;
  inset: 0;
  transition:
      transform 450ms ease,
      opacity 150ms ease;
  z-index: 1;
  overflow: auto;
}

.card[data-visible="false"] .card__back {
  opacity: 0;
  transform: translateY(100%);
}

.card[data-visible="true"] .card__front {
  opacity: 0;
  transform: translateY(100%);
  transition:
      opacity 150ms ease,
      transform 450ms ease 50ms;
}

.card[data-visible="true"] .card__back {
  opacity: 1;
  transform: translateY(0);
  transition:
      transform 350ms ease,
      opacity 450ms ease 100ms;
}

.card__social {
  justify-content: center;
  margin-bottom: 0.5rem;
}

.card__toggle {
  text-align: center;
  border-radius: 50%;
  width: 2rem;
  aspect-ratio: 1 / 1;
  padding: 0.25em;
  border: 0;
  background-color: var(--clr-primary);
  color: var(--text-primary);

  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);

  cursor: pointer;
  transition: background-color 250ms ease;
}

.card__toggle-icon {
  transition: rotate 250ms ease;
}

.card[data-visible="true"] .card__toggle {
  background-color: var(--clr-secondary);
}

.card[data-visible="true"] .card__toggle-icon {
  rotate: 315deg;
}

body {
  font-family: 'Arial', sans-serif;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
}

.lottery-container {
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  margin-top: 20px;
}

.lottery-title {
  text-align: center;
  margin-bottom: 20px;
  color: #303133;
}

.teams-container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 20px;
  align-items: start;
  
  .team-section {
    position: relative;
    padding: 20px;
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(20,33,61,0.9), rgba(32,45,73,0.9));
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.1);
    border: 1px solid rgba(255,255,255,0.1);
    transition: all 0.3s ease;
    
    &.win {
      background: linear-gradient(145deg, rgba(25,118,210,0.9), rgba(30,136,229,0.9));
      transform: translateY(-4px);
      box-shadow: 0 12px 36px rgba(25,118,210,0.2);
      
      .team-header {
        border-bottom-color: rgba(255,255,255,0.2);
      }
      
      .score-status {
        background: #4CAF50;
      }
    }
    
    &.lose {
      opacity: 0.9;
      
      .score-status {
        background: #f44336;
      }
    }
    
    &.team-blue {
      border-left: 4px solid #1976D2;
    }
    
    &.team-red {
      border-right: 4px solid #D32F2F;
    }
  }
}

.team-header {
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding-bottom: 16px;
  margin-bottom: 20px;
  
  .team-title {
    color: #fff;
    font-size: 24px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 16px;
  }
}

.score-display {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(0, 0, 0, 0.2);
  padding: 8px 16px;
  border-radius: 12px;
  
  .score-status {
    padding: 4px 12px;
    border-radius: 20px;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    min-width: 32px;
    text-align: center;
  }
}

.score-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  
  .control-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    transition: all 0.2s ease;
    
    &:hover {
      background: rgba(255, 255, 255, 0.2);
      border-color: rgba(255, 255, 255, 0.3);
      transform: scale(1.05);
    }
    
    &:active {
      transform: scale(0.95);
    }
    
    &.minus-btn {
      background: rgba(244, 67, 54, 0.1);
      &:hover {
        background: rgba(244, 67, 54, 0.2);
      }
    }
    
    &.plus-btn {
      background: rgba(76, 175, 80, 0.1);
      &:hover {
        background: rgba(76, 175, 80, 0.2);
      }
    }
  }
  
  .score-input {
    width: 120px;
    
    :deep(.el-input-number) {
      width: 100%;
      
      .el-input__wrapper {
        background: rgba(255, 255, 255, 0.1);
        box-shadow: none;
        border: 2px solid rgba(255, 255, 255, 0.2);
        padding: 0 8px;
        
        &:hover {
          border-color: rgba(255, 255, 255, 0.3);
        }
      }
      
      .el-input__inner {
        height: 32px;
        text-align: center;
        font-size: 20px;
        font-weight: 600;
        color: #fff;
        padding: 0 8px;
        width: 100%;
      }
      
      .el-input-number__decrease,
      .el-input-number__increase {
        display: none;
      }
    }
  }
}

.vs-divider {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 0;
  
  .vs-line {
    width: 2px;
    height: 60px;
    background: linear-gradient(180deg, transparent, rgba(255,255,255,0.3), transparent);
  }
  
  .vs-text {
    padding: 8px;
    font-size: 20px;
    font-weight: 600;
    color: rgba(255,255,255,0.6);
  }
}

// 适配移动端
@media screen and (max-width: 768px) {
  .teams-container {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .vs-divider {
    flex-direction: row;
    padding: 12px 0;
    
    .vs-line {
      width: 60px;
      height: 2px;
    }
  }
}

.add-player-btn {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.card {
  .delete-icon {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 20px;
    height: 20px;
    background-color: #f56c6c;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: all 0.2s ease;
    z-index: 10;
    
    &:hover {
      transform: scale(1.1);
      background-color: #e64242;
    }
    
    .close-icon {
      font-size: 12px;
      color: white;
    }
  }
  
  &:hover .delete-icon {
    opacity: 1;
  }
}

.header-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
  position: relative;

  .el-button {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }
}

.history-collapse {
  margin-top: 30px;
  border-radius: 8px;
  overflow: hidden;
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.1);

  :deep(.el-collapse-item__header) {
    background: #2a2a2a;
    color: #fff;
    border: none;
    padding: 15px 20px;
    
    &:hover {
      background: #333;
    }
  }

  :deep(.el-collapse-item__content) {
    background: #1a1a1a;
    padding: 0;
    margin: 0;
    border: none;
  }
  
  :deep(.el-collapse-item__wrap) {
    background: #1a1a1a;
    border: none;
  }
}

.history-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
  
  .match-count {
    font-size: 14px;
    color: #909399;
    font-weight: normal;
  }
  
  .sort-btn {
    margin-left: auto;
    color: #909399;
    display: flex;
    align-items: center;
    gap: 4px;
    
    &:hover {
      color: #fff;
    }
    
    .el-icon {
      font-size: 12px;
    }
  }
}

.history-panel {
  .history-item {
    margin: 15px;
    background: #2a2a2a;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    
    .history-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 20px;
      background: rgba(255, 255, 255, 0.05);
      
      .match-date {
        color: #909399;
        font-size: 14px;
      }
    }
    
    .match-content {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      gap: 20px;
      padding: 20px;
      
      .team-side {
        padding: 15px;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.05);
        transition: all 0.3s ease;
        
        &.winner {
          background: rgba(255, 255, 255, 0.1);
          transform: translateY(-2px);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        }
        
        &.blue-team {
          border-left: 4px solid #1976D2;
        }
        
        &.red-team {
          border-right: 4px solid #D32F2F;
        }
        
        .team-score {
          font-size: 24px;
          font-weight: 600;
          color: #fff;
          text-align: center;
          margin-bottom: 15px;
        }
      }
      
      .team-players-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
        
        .player-item {
          display: flex;
          align-items: center;
          gap: 10px;
          padding: 8px;
          background: rgba(255, 255, 255, 0.05);
          border-radius: 6px;
          
          img {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            object-fit: cover;
          }
          
          .player-name {
            color: #fff;
            font-weight: 500;
          }
          
          .player-position {
            color: #409EFF;
            font-size: 12px;
            padding: 2px 6px;
            background: rgba(64, 158, 255, 0.1);
            border-radius: 4px;
          }
          
          .player-champion {
            color: #67C23A;
            font-size: 12px;
            padding: 2px 6px;
            background: rgba(103, 194, 58, 0.1);
            border-radius: 4px;
          }
        }
      }
      
      .vs-indicator {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #909399;
        font-weight: 600;
        font-size: 20px;
      }
    }
  }
}

// 移动端适配
@media screen and (max-width: 768px) {
  .history-panel {
    .history-item {
      .match-content {
        grid-template-columns: 1fr;
        gap: 10px;
        
        .vs-indicator {
          display: none;
        }
        
        .team-side {
          margin: 0;
        }
      }
    }
  }
}

.team-players {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
}

.team-player-card {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  
  :deep(.el-card__header) {
    padding: 12px 16px;
    border-bottom: 1px solid #EBEEF5;
    
    .card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      color: #303133;
    }
  }
  
  .player-info {
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    
    img {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      object-fit: cover;
    }
    
    .player-details {
      flex: 1;
      
      p {
        margin: 4px 0;
        
        &.position {
          color: #409EFF;
          font-size: 14px;
        }
        
        &.champion {
          color: #67C23A;
          font-size: 14px;
        }
      }
    }
  }
}

.match-controls {
  display: flex;
  justify-content: center;
  margin: 24px 0;
  
  .save-match-btn {
    min-width: 160px !important;
    height: 44px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    border-radius: 22px !important;
    background: linear-gradient(45deg, #1976D2, #2196F3) !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(33, 150, 243, 0.3) !important;
    transition: all 0.3s ease !important;
    
    &:hover {
      transform: translateY(-2px) !important;
      box-shadow: 0 6px 20px rgba(33, 150, 243, 0.4) !important;
      background: linear-gradient(45deg, #1565C0, #1976D2) !important;
    }
    
    &:active {
      transform: translateY(0) !important;
    }
    
    &:disabled {
      background: linear-gradient(45deg, #9e9e9e, #bdbdbd) !important;
      box-shadow: none !important;
      cursor: not-allowed !important;
      color: rgba(255, 255, 255, 0.7) !important;
      text-shadow: none !important;
      
      .el-icon {
        opacity: 0.7 !important;
        filter: none !important;
      }
    }
    
    .el-icon {
      font-size: 18px !important;
      margin-right: 8px !important;
    }
  }
}

// 修改通用按钮样式
.custom-btn {
  min-width: 120px;
  height: 40px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 20px;
  border: none;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  
  .el-icon {
    font-size: 16px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
  }
  
  &.primary {
    background: linear-gradient(45deg, #1976D2, #2196F3);
    box-shadow: 0 4px 15px rgba(33, 150, 243, 0.3);
    
    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(33, 150, 243, 0.4);
      background: linear-gradient(45deg, #1565C0, #1976D2);
      color: #ffffff;
    }
  }
  
  &.warning {
    background: linear-gradient(45deg, #F57C00, #FF9800);
    box-shadow: 0 4px 15px rgba(255, 152, 0, 0.3);
    
    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(255, 152, 0, 0.4);
      background: linear-gradient(45deg, #EF6C00, #F57C00);
      color: #ffffff;
    }
  }
  
  &.danger {
    background: linear-gradient(45deg, #D32F2F, #F44336);
    box-shadow: 0 4px 15px rgba(244, 67, 54, 0.3);
    
    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(244, 67, 54, 0.4);
      background: linear-gradient(45deg, #C62828, #D32F2F);
      color: #ffffff;
    }
  }
  
  &:active {
    transform: translateY(0);
  }
  
  &:disabled {
    background: linear-gradient(45deg, #9e9e9e, #bdbdbd);
    box-shadow: none;
    cursor: not-allowed;
    color: rgba(255, 255, 255, 0.7);
    text-shadow: none;
    
    .el-icon {
      opacity: 0.7;
      filter: none;
    }
  }
}

// 修改排序按钮样式
.sort-btn {
  &:hover {
    color: #fff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  }
  
  .el-icon {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
  }
}

// 修改分页器样式
.pagination-wrapper {
  padding: 24px;
  margin-top: 20px;
  background: rgba(255, 255, 255, 0.05);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0 0 12px 12px;
  
  :deep(.el-pagination) {
    justify-content: flex-start;
    padding: 0 16px;
    
    .el-pagination__total,
    .el-pagination__sizes {
      color: #fff;
      font-size: 14px;
      height: 32px;
      line-height: 32px;
    }
    
    .btn-prev,
    .btn-next,
    .el-pager li {
      background: rgba(255, 255, 255, 0.1);
      color: #fff;
      border: none;
      min-width: 32px;
      height: 32px;
      line-height: 32px;
      font-weight: 500;
      transition: all 0.3s ease;
      
      &:hover {
        background: rgba(255, 255, 255, 0.2);
        transform: translateY(-1px);
      }
      
      &.is-active {
        background: #1976D2;
        color: #fff;
        font-weight: 600;
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(25, 118, 210, 0.4);
      }
    }
    
    .el-select {
      .el-input {
        .el-input__wrapper {
          background: rgba(255, 255, 255, 0.1);
          box-shadow: none;
          border: none;
          
          &:hover {
            background: rgba(255, 255, 255, 0.2);
          }
          
          .el-input__inner {
            color: #fff;
            height: 32px;
            line-height: 32px;
          }
        }
      }
    }
  }
}

</style>